<template>
  <a-modal
    :open="visible"
    title="批量修改房态"
    width="600px"
    @ok="handleOk"
    @cancel="handleCancel"
    @update:open="(val) => emit('update:visible', val)"
  >
    <a-form :model="formData" :rules="rules" ref="formRef" layout="vertical">
      <a-form-item label="选择房间" name="selectedRooms">
        <a-transfer
          v-model:target-keys="formData.selectedRooms"
          :data-source="allRooms"
          :titles="['可选房间', '已选房间']"
          :render="(item) => item.title"
          :show-search="true"
          :filter-option="filterOption"
        />
      </a-form-item>

      <a-form-item label="目标状态" name="targetStatus">
        <a-select
          v-model:value="formData.targetStatus"
          placeholder="请选择目标状态"
        >
          <a-select-option value="vacant">空闲</a-select-option>
          <a-select-option value="occupied">占用</a-select-option>
          <a-select-option value="disabled">禁用</a-select-option>
          <a-select-option value="dirty">脏房</a-select-option>
          <a-select-option value="willDepart">将离</a-select-option>
          <a-select-option value="hourly">钟点房</a-select-option>
          <a-select-option value="earlyMorning">凌晨房</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="修改原因" name="reason">
        <a-textarea
          v-model:value="formData.reason"
          placeholder="请输入批量修改原因"
          :rows="3"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { message } from 'ant-design-vue';
import type { FormInstance } from 'ant-design-vue';

interface Room {
  id: string;
  number: string;
  type: string;
  status: string;
  capacity: number;
  occupied: number;
}

interface Props {
  visible: boolean;
}

interface Emits {
  (e: 'update:visible', value: boolean): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const formRef = ref<FormInstance>();
const formData = ref({
  selectedRooms: [] as string[],
  targetStatus: '',
  reason: '',
});

// 模拟所有房间数据
const allRooms = ref([
  { key: '1', title: '1001 (休息室)', disabled: false },
  { key: '2', title: '1002 (休息室)', disabled: false },
  { key: '3', title: '1003 (休息室)', disabled: false },
  { key: '4', title: '2001 (棋牌室)', disabled: false },
  { key: '5', title: '2002 (棋牌室)', disabled: false },
  { key: '6', title: '3001 (VIP休息室)', disabled: false },
  { key: '7', title: '3002 (VIP休息室)', disabled: false },
]);

const rules = {
  selectedRooms: [{ required: true, message: '请选择要修改的房间' }],
  targetStatus: [{ required: true, message: '请选择目标状态' }],
};

const filterOption = (inputValue: string, item: any) => {
  return item.title.indexOf(inputValue) !== -1;
};

const handleOk = async () => {
  try {
    await formRef.value?.validate();

    // 这里调用批量修改API
    message.success(
      `成功修改 ${formData.value.selectedRooms.length} 个房间的状态`,
    );
    emit('update:visible', false);
  } catch (error) {
    console.error('表单验证失败:', error);
  }
};

const handleCancel = () => {
  emit('update:visible', false);
};
</script>
